Jassif Team Institution

AngularJS ডেটা বাইন্ডিং

AngularJS-এ ডেটা বাইন্ডিং হল মডেল এবং ভিউ এর মধ্যে সিঙ্ক্রোনাইজেশন।

ডেটা মডেল

একটি ডেটা মডেল একটি অ্যাপ্লিকেশনের জন্য উপলব্ধ ডেটার একটি সংগ্রহ।

উদাহরণ

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";
});

এইচটিএমএল ভিউ

একটি AngularJS অ্যাপ্লিকেশনে একটি ধারক থাকে যাকে একটি ভিউ বলা হয় যাতে প্রদর্শিত HTML থাকে।

ভিউটির মডেলটিতে অ্যাক্সেস রয়েছে এবং ভিউতে মডেল ডেটা প্রদর্শন করার বিভিন্ন উপায় রয়েছে:

<p ng-bind="firstname"></p>

<p>First name: {{firstname}}</p>

ng-মডেল নির্দেশিকা

এইচটিএমএল কন্ট্রোলের (ইনপুট, সিলেক্ট, টেক্সটেরিয়া) ভিউতে মডেল থেকে ডেটা আবদ্ধ করতে ng-মডেল নির্দেশিকা ব্যবহার করুন।

উদাহরণ

<input ng-model="firstname">

এনজি-মডেল নির্দেশিকা মডেল এবং ভিউয়ের মধ্যে দ্বি-মুখী আবদ্ধতা প্রদান করে।

দ্বিমুখী বাঁধাই

AngularJS-এ ডেটা বাইন্ডিং হল মডেল এবং ভিউ এর মধ্যে সিঙ্ক্রোনাইজেশন।

যখন মডেলে ডেটা পরিবর্তিত হয়, দৃশ্যটি সেই পরিবর্তনকে প্রতিফলিত করে এবং যখন ভিউতে ডেটা পরিবর্তন হয়, মডেলটিও আপডেট হয়।

এটি অবিলম্বে এবং স্বয়ংক্রিয়ভাবে ঘটে, যা নিশ্চিত করে যে মডেল এবং ভিউ সর্বদা আপ টু ডেট।

সম্পূর্ণ উদাহরণ

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="firstname">
    <h1>{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";
});
</script>

AngularJS কন্ট্রোলার

AngularJS-এ অ্যাপ্লিকেশনগুলি কন্ট্রোলার দ্বারা নিয়ন্ত্রিত হয়।

মডেল এবং ভিউয়ের তাত্ক্ষণিক সিঙ্ক্রোনাইজেশনের কারণে, নিয়ামকটিকে দৃশ্য থেকে সম্পূর্ণ আলাদা করা যায় এবং শুধুমাত্র মডেল ডেটাতে ফোকাস করা যায়।

AngularJS-এ ডেটা বাইন্ডিংয়ের জন্য ধন্যবাদ, ভিউটি কন্ট্রোলারে করা যেকোনো পরিবর্তন প্রতিফলিত করবে।

উদাহরণ

<div ng-app="myApp" ng-controller="myCtrl">
    <h1 ng-click="changeName()">{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.changeName = function() {
        $scope.firstname = "Nelly";
    }
});
</script>

ব্যায়ামের মাধ্যমে শেখা

বাঁধাই পদ্ধতির তুলনা